<template>
 <div class="city"> 
   
    <div class="top"> 
     <van-search shape="round" show-action
       v-model="searchvalue" placeholder="城市/区域/位置"  @cancel="cancleclick"/>
     <van-tabs v-model:active="tabactive" color="#ff9854">
        <van-tab title="国内-港澳台"></van-tab>
        <van-tab title="海外"></van-tab>
      </van-tabs>
    </div> 
    <div class="content">
    <van-index-bar>
    <div v-if="tabactive == 0">
      <van-index-anchor index="热门城市" />
      <div class="list">
        <template v-for="(city ,index) in citydata.cityGroup.hotCities"  :key ="index">
          <div class="item-city" @click=cityclick(city)>{{ city.cityName }}</div>
        </template>
      </div>
      
      <template v-for="(item, index) in citydata.cityGroup.cities" :key="index">
        <van-index-anchor :index="item.group" />
        <template v-for="(item2, inden) in item.cities" :key="inden">
          <van-cell :title="item2.cityName" @click="cityclick(city)"/>
        </template>
      </template>
    </div>

    <div v-else-if="tabactive == 1">
      <van-index-anchor index="热门城市" />
      <div class="list">
        <template v-for="(city ,index) in citydata.cityGroupOverSea.hotCities"  :key ="index">
          <div class="item-city" @click="cityclick(city)">{{ city.cityName }}</div>
        </template>
      </div>
      <template v-for="(item, index) in citydata.cityGroupOverSea.cities" :key="index">
        <van-index-anchor :index="item.group" />
        <template v-for="(item2, inden) in item.cities" :key="inden">
          <van-cell :title="item2.cityName" @click="cityclick(city)" />
        </template>
      </template>
    </div>
  </van-index-bar>
</div>

  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
// import  HYRequest from '@/services/request/index'
import { getCityAll } from "@/services/index";
import usecityStore from "@/stores/modules/city";
const router=useRouter();
const searchvalue=ref("")

const cancleclick=()=>{
  router.go(-1);
}

// tabs
const tabactive=ref();

console.log(tabactive.value);

// 获取数据
const citydata=ref({});
getCityAll().then((res)=>{citydata.value=res.data;
})


const cityStore=usecityStore();
 cityStore.getCitydata();
// const { citydata }= cityStore;
// console.log(citydata);

//获取城市
const cityclick=(city)=>{
  // console.log(city);
  cityStore.currentcity=city;
  router.go(-1);
}

</script>

<style lang="less" scoped >
 .city{
  --van-tabs-line-height:50px;
//第一种
  // .top{
  //   position: fixed;
  //   left: 0;
  //   right:0;
  //   top:0
  // }
  // .content{
  //   margin-top:100px
  // }
//第二种
    .top{
      display: fixed;
    }
  .content{
    height: calc(100vh - 100px);
    overflow-y: auto;

    .list{
      display:flex;
      flex-wrap: wrap;
      justify-content: space-around;
      text-align: center;
      .item-city{
       
        font-size: 14px;
        background-color: #fff4ec;
        width: 70px;
        height: 28px;
        line-height: 28px;
       color:#000;
        
      }
    }
  }
 }
</style>